<div class="component-tray" nz-row>
<div class="login-panel" nz-col nzSpan="6" nzOffset="8">

    <!-- title -->
    <div class="title-container" nz-row nzType="flex" nzJustify="center" nzAlign="middle">
    <div class="login-icon" nz-col nzSpan="2">
        <img src="../../../favicon.ico" alt="">
    </div>
    <div class="login-title" nz-col nzSpan="12">
        快速开发框架
    </div>
    </div>

    <!-- 登录表单 -->
    <div class="form-container" nz-row>
        <form nz-form [formGroup]="loginForm" class="login-form" (ngSubmit)="submitForm()">
            <nz-form-item>
                <nz-form-control nzErrorTip="请输入工号！">
                <nz-input-group nzPrefixIcon="number">
                    <input #userid type="text" nz-input formControlName="userid" 
                        placeholder="工号" nzSize="large" (ngModelChange)="useridChange($event)"/>
                </nz-input-group>
                </nz-form-control>
            </nz-form-item>

            <!-- readonly="readonly" [disabled]="true" -->
            <nz-form-item>
                <nz-form-control nzErrorTip="输入工号后自动获取">
                <nz-input-group nzPrefixIcon="user">
                    <input type="text" nz-input formControlName="userName" placeholder="用户名" nzSize="large" />
                </nz-input-group>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-control nzErrorTip="请输入密码！">
                <nz-input-group nzPrefixIcon="lock">
                    <input type="password" nz-input formControlName="password" placeholder="密码" nzSize="large"/>
                </nz-input-group>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-control>
                    <button nz-button class="login-form-button" [nzType]="'primary'">登录</button>
                </nz-form-control>
            </nz-form-item>
        </form>
    </div>
    

</div>
</div>

<p-toast [style]="{marginTop: '80px'}" styleClass="primeng-custom-toast" key="custom" position="top-right"></p-toast>